// components/tabs.js
Component({
  /**
   * 多插槽需要开启此配置
   */
  options: {
    multipleSlots: true
  },
  /**
   * 组件的属性列表
   */
  properties: {
    tabs: {
      type: Array,
      value: [],
    },
  },

  /**
   * 组件的初始数据
   */
  data: {
    currentTabIndex: 0
  },

  /**
   * 组件的方法列表
   */
  methods: {
    // 1.传入一个数组，按数组元素内容渲染我们的标签页选项
    // 2．能够监听点击事件，并且通知使用组件的页面或者父组件，通过事件通知我们选择了什么
    // 通用组件
    // 父组件(页面)通过属性给自定义组件传递传参
    // 自定义组件通过自定义事件给父组件（页面）传递参数
    handleTabChange: function(event) {
      console.log(event)
      const index = event.currentTarget.dataset.index
      if (index === this.data.currentTabIndex) {
        return
      }
      // 高内聚，低耦合
      this.setData({
        currentTabIndex: index
      })

      this.triggerEvent('change', { index })
    },

    handleTouchMove(event) {
      console.log(event)
      // 0,-1,1
      const direction = event.direction
      const currentTabIndex = this.data.currentTabIndex
      const targetTabIndex = currentTabIndex + direction

      if (targetTabIndex < 0 || targetTabIndex > this.data.tabs.length - 1) {
        return
      }

      const customEvent = {
        currentTarget: {
          dataset: {
            index: targetTabIndex
          }
        }
      }

      handleTabChange(customEvent)
    },

    /* handleTouchstart:function (event) {
       console.log(event)
       // 数据绑定,记录触摸开始的X轴的位置
     },

     handleTouchend:function (event) {
       console.log(event)
       // 把结束时的X轴位置-触摸开始时的位置
       // 做判断，判断是往左划还是往右划
       // 做数据绑定，改变currentTabIndex的值
     },*/

  }
})
